import React from "react"

import { Tabs, WhiteSpace, Badge } from 'antd-mobile';

import {get_shoucang_diantai} from "../../../../api/index"

import myStyle from "../../style/My.module.css"

// const tabs = [
//   { title: <Badge text={'3'}>First Tab</Badge> },
//   { title: <Badge text={'今日(20)'}>Second Tab</Badge> },
//   { title: <Badge dot>Third Tab</Badge> },
//   { title: <Badge dot>four Tab</Badge> },
// ];

const tabs = [
  { title: "我创建的电台" },
  { title: "我收藏的电台" },
  // { title: "视频" },
  // { title: "专栏" },
  // { title: "Mlog" },
];

class Diantai_Tabs extends React.Component{
  constructor(){
    super()
    this.state = {
      diantai:{},
      diantai_arr:[]
    }
  }

  componentDidMount(){
    let uid = localStorage.getItem("uId")
    // login1()
    // .then(body=>body.json())
    // .then(res=>{
    //   console.log(res);
    //   get_shoucang_diantai()
    //   .then(body=>body.json())
    //   .then(res=>{
    //     console.log(res);
    //       this.setState({
    //         diantai:res,
    //         diantai_arr:res.djRadios
    //     })
    //     console.log(this.state.diantai_arr);
    //   })
    // })

    get_shoucang_diantai(uid)
      .then(body=>body.json())
      .then(res=>{
        console.log(res);
          this.setState({
            diantai:res,
            diantai_arr:res.djRadios
        })
        console.log(this.state.diantai_arr);
      })

  }
  

  render(){
    // let diantai_arr = this.state.diantai.djRadios
    // console.log(diantai_arr);

    return (
    <div>
    <Tabs tabs={tabs}
        initialPage={1}
        onChange={(tab, index) => { console.log('onChange', index, tab); }}
        onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
      >

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '500px', backgroundColor: '#fff' }}>
        Content of five tab
      </div>

      <div style={{ height: '500px', backgroundColor: '#fff'}}>
        <h3 style={{display:"inline", paddingLeft:"20px"}}>{'我订阅的电台'+"("+this.state.diantai.count+")"}</h3>
          <ul className="playerlist">
            {this.state.diantai_arr.map(item=><li key={item.id} style={{height:"60px",display:"flex",marginBottom:"10px"}}>
              <img src={item.picUrl} alt="" style={{width:'60px',height:'60px'}}/>
              <div style={{display:'flex',flexDirection:'column'}}>
                <span style={{marginBottom:"5px"}}>{item.name}</span>
                <span>{"by -"+item.dj.nickname}</span>
                <span className={myStyle.luehao}
                style={{overflow:'hidden',textOverflow:'ellipsis',
                whiteSpace:'nowrap',width:'250px'}}>{item.lastProgramName}</span>
              </div>
            </li>)}
          </ul>
      </div>
      
      </Tabs>
    </div>
    )
  }
}




export default Diantai_Tabs